<template>
    <!-- 用户月活跃度曲线图 -->
    <div>
        <div class="lbl">
            人员月活跃度
        </div>
        <div ref="chart" style="width:100%;height:400px">
        </div>
    </div>

</template>

<script>
export default {
    name:'UserActive',
    props:['Xdata','Ydata'],
    data(){
        return {
            chart:null,
        }
    },
    methods:{
        dataInit(){
            const option = {
            xAxis: {
                type: 'category',
                data: this.Xdata
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                data: this.Ydata,
                type: 'line',
                smooth: true
                },
            ]
            }
            this.chart = this.$echarts.init(this.$refs.chart);
            this.chart.setOption(option);
        },
        destoryData(){
            if(!this.chart){
            return
            }
            this.chart.dispose();
            this.chart = null;
        },
    },
    beforeDestroy(){
        this.destoryData()
    },
    mounted(){
        this.dataInit();
    },  
    watch:{
        Ydata:{
            handler: function(val){
                this.destoryData()
                this.dataInit()
            },
            deep: true
        }
    }



}
</script>

<style lang="scss" scoped>
    .lbl{
        height: 50px;
        width: 300px;
        // background: skyblue;
        text-align: center;
        line-height: 50px;
        margin: 30px auto -40px;
        font-size: 20px;
        font-family: '楷体';
        font-weight: bold;
    }
</style>